<template>
  <div class="dashboard-container">
    <div class="dashboard-text">{{ name }}，你好！</div>
    <div class="dashboard-text">欢迎登陆 租房后台管理系统 </div>
    <panel-group @handleSetLineChartData="handleSetLineChartData" />
  </div>

</template>

<script>
  import { mapGetters } from 'vuex'
  import PanelGroup from './dashboard/PanelGroup'
  const lineChartData = {
    newVisitis: {
      expectedData: [100, 120, 161, 134, 105, 160, 165],
      actualData: [120, 82, 91, 154, 162, 140, 145]
    },
    messages: {
      expectedData: [200, 192, 120, 144, 160, 130, 140],
      actualData: [180, 160, 151, 106, 145, 150, 130]
    },
    purchases: {
      expectedData: [80, 100, 121, 104, 105, 90, 100],
      actualData: [120, 90, 100, 138, 142, 130, 130]
    },
    shoppings: {
      expectedData: [130, 140, 141, 142, 145, 150, 160],
      actualData: [120, 82, 91, 154, 162, 140, 130]
    }
  }
  export default {
    name: 'Dashboard',
    components: {
      PanelGroup
    },

    data() {
      return {

      }
    },

    computed: {
      ...mapGetters([
        'name',
        'roles'
      ])
    },
    created() {
    },
    methods: {
      handleSetLineChartData(type) {
        this.lineChartData = lineChartData[type]
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
      text-align: center;
      background-color: white;
    }
    &-text {
      font-size: 30px;
      line-height: 86px;
    }
  }
</style>
